<script setup lang="ts">
// 路由
const router = useRouter();

// header导航栏目
const headerNavMenuList = ref([])

// 是否显示搜索框
const showHeaderSearchBox = ref(false);

// 是否是暗黑模式
const isDark = ref(false);

// 搜索图标点击事件
const searchIconClickHandle = () => {
    showHeaderSearchBox.value = true;
}

// 隐藏搜索框
const hideHeaderSearchBox = () => {
    showHeaderSearchBox.value = false;
}

// 切换主题
const changeThemeHandle = () => {
    isDark.value ? isDark.value = false : isDark.value = true;
}

// 监听导航栏暗黑模式切换
watch(isDark, (value, oldValue) => {
    if (value) {
        // 暗黑模式
        document.documentElement.setAttribute("theme-mode", "dark");
    } else {
        // 非暗黑模式
        document.documentElement.removeAttribute("theme-mode");
    }
})

// 获取分类列表
const { data: categoryList } = await useFetch(`${baseUrl}/category/list/usable`)
headerNavMenuList.value = categoryList.value.data;

// 监听页面滚动
onMounted(() => {
    window.addEventListener('scroll', () => {
        let header = document.querySelector('.navbar');
        if (window.scrollY > 70) {
            header?.classList.add('c-fixed');

        } else {
            header?.classList.remove('c-fixed')
        }
    });
})
</script>

<template @scroll="scrollLinstener">
    <div class="home-header ">
        <!-- 左侧导航 -->
        <div class="header-container ">
            <t-head-menu class="shadow-xl z-[99] navbar" expand-type="popup" theme="light">
                <template #logo>
                    <img style="margin-left: 100px" class="w-[150px] reactive mt-[50px]" height="28"
                        src="https://static.huihuiv.com/content/2024-03-19/R1arbfefwWo3alXQnY9GvyGerloTivmTwz5ixCAD.png"
                        alt="logo" />
                </template>

                <span v-for="(item, index) in headerNavMenuList">
                    <span v-if="item.type === 0 || item.type === 2">
                        <span v-if="item.type === 0">
                            <!-- 目录型-->
                            <t-submenu :value="item.cid" class="text-[18px] " :title="item.title">
                                <span v-for="(child, idx) in headerNavMenuList">
                                    <span v-if="child.pid === item.cid">
                                        <t-menu-item class="p-[20px]" :value="`${item.cid}-${child.cid}`">
                                            <nuxt-link  class="text-[18px] hover:text-[#0052d9] transition duration-700 ease-in-out" :to="child.router_link">{{ child.title }}</nuxt-link>
                                        </t-menu-item>
                                    </span>
                                </span>
                            </t-submenu>
                        </span>
                        <span v-if="item.type === 2">
                            <!-- 顶级无子栏目-->
                            <t-menu-item :value="item.cid">
                                <nuxt-link  class="text-[18px] hover:text-[#0052d9] transition duration-700 ease-in-out" :to="item.router_link">{{ item.title }}</nuxt-link>
                            </t-menu-item>
                        </span>
                    </span>
                </span>

                <template #operations>
                    <t-button variant="text" shape="square" @click="searchIconClickHandle">
                        <template #icon><t-icon name="search" /></template>
                    </t-button>
                    <t-button variant="text" shape="square" @click="changeThemeHandle">

                        <template #icon><t-icon name="moon" /></template>
                    </t-button>
                    <t-button variant="text" shape="square" disabled>

                        <template #icon><t-icon name="user" /></template>
                    </t-button>
                </template>
            </t-head-menu>
        </div>
        <!-- 搜索组件 -->
        <layout-components-search :showHeaderSearchBox="showHeaderSearchBox"
            @hide-header-search-box="hideHeaderSearchBox"></layout-components-search>
    </div>
</template>

<style scoped>
/** 顶部导航css */
:deep() {
    .t-head-menu {
        padding: 8px !important;
    }

    .c-fixed {
        padding: 15px 0 !important;
        position: fixed;
    }

    .header-search-input-style {
        border-radius: 99999px !important;
    }

    .navbar {
        content: "";
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10px);
    }

}
</style>